<template>
	<div>
		<el-form :inline="true" size="mini">
			<el-form-item>
				<el-input v-model="keyword" placeholder="请输入供应商名称"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="sreach">查询供应商</el-button>
				<el-button type="primary" @click="addDeptPartment">新增供应商</el-button>
			</el-form-item>
		</el-form>
		<el-table :data="pageInfo.list" style="100%">
			<el-table-column type="selection"></el-table-column>
			<el-table-column label="供应商编号" prop="id" width="100" ></el-table-column>
			<el-table-column label="供应商名称" prop="shortname" width="100" ></el-table-column>
			<el-table-column label="供应商全称" prop="langname" width="100" ></el-table-column>
			<el-table-column label="负责人称谓" prop="headapp" width="100" ></el-table-column>
			<el-table-column label="负责人姓名" prop="headname" width="100" ></el-table-column>
			<el-table-column label="电话" prop="phone" width="100" ></el-table-column>
			<el-table-column label="传真" prop="fax" width="100" ></el-table-column>
			<el-table-column label="移动电话" prop="mobilephone" width="100" ></el-table-column>
			<el-table-column label="供应商地址" prop="suppileraddress" width="100" ></el-table-column>
			<el-table-column label="工厂地址" prop="factoryaddress" width="100" ></el-table-column>
			<el-table-column label="最近一次进货日期" prop="lastbuydate" width="100" ></el-table-column>
			<el-table-column label="操作" width="300">
				<template slot-scope="scope">
					<template>
						<el-button @click="handleTypeEdit(scope)" size="mini">编辑</el-button>
						<el-button size="mini" @click="handleTypeDel(scope)">删除</el-button>
					</template>					
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			layout="prev,pager,next,total,jumper,sizes"			
			:total="pageInfo.total"
			:page-size="pageInfo.pageSize"
			:page-count="pageInfo.navigatePages"
			:page-sizes="[5,10,15,20]"
			:current-page="pageInfo.pageNum"
			background
			@current-change="handleCurrentChange"
			@size-change="handleSizeChange"
		></el-pagination>
		<el-dialog :visible.sync="addDeptPartments" title="新增供应商" center>
			<el-form :inline="true" align="center" size="mini">
				<el-form-item label="供应商名称:">
					<el-input v-model="type.shortname" placeholder="供应商名称" ></el-input>
				</el-form-item>
				<el-form-item label="供应商全称:">
					<el-input v-model="type.langname" placeholder="供应商全称" ></el-input>
				</el-form-item>
				<el-form-item label="负责人称谓:">
					<el-input v-model="type.headapp" placeholder="供应商全称" ></el-input>
				</el-form-item>
				<el-form-item label="负责人姓名:">
					<el-input v-model="type.headname" placeholder="负责人姓名" ></el-input>
				</el-form-item>
				<el-form-item label="电话:">
					<el-input v-model="type.phone" placeholder="负责人姓名" ></el-input>
				</el-form-item>
				<el-form-item label="传真:">
					<el-input v-model="type.fax" placeholder="负责人姓名" ></el-input>
				</el-form-item>
				<el-form-item label="移动电话:">
					<el-input v-model="type.mobilephone" placeholder="负责人姓名" ></el-input>
				</el-form-item>
				<el-form-item label="供应商地址:">
					<el-input v-model="type.suppileraddress" placeholder="负责人姓名" ></el-input>
				</el-form-item>
				<el-form-item label="工厂地址:">
					<el-input v-model="type.factoryaddress" placeholder="负责人姓名" ></el-input>
				</el-form-item>
				<el-form-item label="最近一次进货日期:">
					<el-date-picker v-model="type.lastbuydate" placeholder="最近一次进货日期" type="date" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
				</el-form-item>
				<el-form-item>
					<el-button type="warning" @click="addt()">取消</el-button>
					<el-button type="primary" @click="insertType()">保存</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
		
		<el-dialog :visible.sync="updatetype" title="修改供应商" center>
			<el-form :inline="true" align="center" size="mini">
				<el-form-item label="供应商名称:">
					<el-input v-model="type.shortname" placeholder="供应商名称" ></el-input>
				</el-form-item>
				<el-form-item label="供应商全称:">
					<el-input v-model="type.langname" placeholder="供应商全称" ></el-input>
				</el-form-item>
				<el-form-item label="负责人称谓:">
					<el-input v-model="type.headapp" placeholder="供应商全称" ></el-input>
				</el-form-item>
				<el-form-item label="负责人姓名:">
					<el-input v-model="type.headname" placeholder="负责人姓名" ></el-input>
				</el-form-item>
				<el-form-item label="电话:">
					<el-input v-model="type.phone" placeholder="负责人姓名" ></el-input>
				</el-form-item>
				<el-form-item label="传真:">
					<el-input v-model="type.fax" placeholder="负责人姓名" ></el-input>
				</el-form-item>
				<el-form-item label="移动电话:">
					<el-input v-model="type.mobilephone" placeholder="负责人姓名" ></el-input>
				</el-form-item>
				<el-form-item label="供应商地址:">
					<el-input v-model="type.suppileraddress" placeholder="负责人姓名" ></el-input>
				</el-form-item>
				<el-form-item label="工厂地址:">
					<el-input v-model="type.factoryaddress" placeholder="负责人姓名" ></el-input>
				</el-form-item>
				<el-form-item label="最近一次进货日期:">
					<el-date-picker v-model="type.lastbuydate" placeholder="最近一次进货日期" type="date" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
				</el-form-item>
				<el-form-item>
					<el-button @click="handleTypeSave()" size="mini">保存</el-button>
					<el-button size="mini" @click="quxiao()">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				pageInfo:{
					pageNum:1,
					pageSize:4
				},
				keyword:"",
				type:{},
				addDeptPartments:false,
				disableItemDialog:false,
				updatetype:false,
				typeList:[],
				params:{},
				itemPageInfo:{},
				ids:{}
			}
		},
		created() {
			this.showData(1,this.pageInfo.pageSize,this.keyword);
		},
		methods:{
			showData(pageNum,pageSize,keyword){
				let url = "supplier/getPage";
				let params = `pageNum=${pageNum}&pageSize=${pageSize}&keyword=${keyword}`;
				axios.post(url,params).then(resp=>{
					this.pageInfo = resp.data.data;
					console.log(this.pageInfo);
				});
			},
			handleCurrentChange(pageNum){
				this.showData(pageNum,this.pageInfo.pageSize,this.keyword);
			},
			handleSizeChange(pageSize){
				this.showData(1,pageSize,this.keyword);
				this.pageInfo.pageSize = pageSize;
			},
			sreach(){
				this.showData(1,this.pageInfo.pageSize,this.keyword);
			},
			handleTypeSave(scope){
				let url = "supplier/update";
				axios.post(url,this.type).then(resp=>{
					if(resp.data.data == 1){	
						this.$alert("修改成功");
						this.updatetype = false;
						this.ids.shortname = this.type.shortname;
						this.ids.langname = this.type.langname;
						this.ids.headapp = this.type.headapp;
						this.ids.headname = this.type.headname;
						this.ids.phone = this.type.phone;
						this.ids.fax = this.type.fax;
						this.ids.mobilephone = this.type.mobilephone;
						this.ids.suppileraddress = this.type.suppileraddress;
						this.ids.factoryaddress = this.type.factoryaddress;
						this.ids.lastbuydate = this.type.lastbuydate;
					}
				});
			},
			handleTypeDel(scope){
				this.$confirm("是否删除","提示").then(()=>{
					let url = "supplier/delete";
					axios.post(url,`id=${scope.row.id}`).then(resp=>{
						if(resp.data.data == 1){
							this.$alert("删除成功！");
							this.showData(1,this.pageInfo.pageSize,this.keyword)
						}
					});
				}).catch(()=>{
					console.log("cancel");
				});
			},
			insertType(){
				let url = "supplier/insert";
				let department = this.type
				console.log(department);
				axios.post(url,department).then(resp=>{
					if(resp.data.data == 1){						
						this.showData(1,this.pageInfo.pageSize,this.keyword);
						this.disableAddTypeDialog = false;
						
						// this.type = {};
					}
				});
			},
			addDeptPartment(){
				this.addDeptPartments = true;
			},
			addt(){
				this.addDeptPartments = false;
			},
			//更新
			handleTypeEdit(scope){
				this.updatetype = true;
				this.ids = scope.row;
				// console.log(scope.$index,scope.row);
				this.$set(scope.row,"edit",true);
				//对象克隆
				this.type = {...scope.row};
			},
			quxiao(){
				this.updatetype = false;
			},
			/* handleTypeSave(scope){
				let url = "supplier/update";
				axios.post(url,this.type).then(resp=>{
					if(resp.data.data == 1){	
						scope.row.edit = false;
						scope.row.constanttypecode = this.type.constanttypecode;
						scope.row.constanttypename = this.type.constanttypename;
					}
				});
			}, */
		}
	}
</script>

<style>
</style>
